<template>
     <el-form :model="form" label-width="auto" style="padding: 10px;">
        <el-form-item label="角色">
                  <el-input v-model="form.role" :disabled="action!='add'"/>
                </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="form.sort"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
          <div style="text-align:center;margin: 10px auto;">
          <el-button type="primary" @click="handleAdd">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit,getCode} from '/http/role.js'
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              role:'',
              sort:null,
              remark:''
            })


          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');

          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
            }else{
              getCode().then(res=>{
                form.sort = res.data.data
              })
              action.value= 'add'
            }
          })

          return{
            form,handleAdd,handleCancel,action
          }
        }
    }
</script>

<style scoped>

</style>